<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>选择排序演示</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="selection-sort.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <a href="index.html" class="back-button">← 返回首页</a>
            <h1>🔍 选择排序 🔍</h1>
        </div>

        <div class="visualization-container">
            <div class="step-description">
                <h3>当前步骤说明：</h3>
                <p>选择排序会从未排序的数字中找出最小的，放到已排序部分的末尾</p>
                <ul>
                    <li>🔵 蓝色：未排序的数字</li>
                    <li>🔍 橙色：正在比较的数字</li>
                    <li>❤️ 红色：当前找到的最小值</li>
                    <li>✅ 绿色：已经排好序的数字</li>
                </ul>
            </div>

            <div class="game-controls">
                <button id="generateNew">生成新数字</button>
                <button id="startSort">开始排序</button>
                <button id="nextStep">下一步</button>
                <button id="reset">重置</button>
            </div>

            <div class="numbers-container" id="numbersContainer">
                <!-- 数字方块会通过 JavaScript 动态生成 -->
            </div>

            <div class="current-status">
                <div id="currentStep">准备开始...</div>
            </div>
        </div>

        <div class="explanation">
            <h3>📝 算法说明：</h3>
            <div class="algorithm-steps">
                <p>选择排序的工作原理：</p>
                <ol>
                    <li>将数组分成已排序和未排序两部分</li>
                    <li>在未排序部分中找到最小的数</li>
                    <li>将这个最小的数和未排序部分的第一个数交换位置</li>
                    <li>重复步骤2-3，直到所有数字都排序完成</li>
                </ol>
            </div>
            <div class="tips">
                <p>💡 提示：</p>
                <ul>
                    <li>可以点击"下一步"按钮慢慢观察每一步的变化</li>
                    <li>也可以点击"开始排序"按钮查看完整的排序过程</li>
                    <li>注意观察最小值是如何被找出来的</li>
                </ul>
            </div>
        </div>
    </div>
    <script src="selection-sort.js"></script>
</body>
</html> 